<template>
	<!-- 是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
	<el-menu router :collapse="!collapse" active-text-color="#ffd04b" background-color="#2d3436" text-color="#fff">
		<el-sub-menu v-for="item in menuList" :index="item.path">
			<template #title>
				<el-icon><location /></el-icon>
				<span>{{ item.label }}</span>
			</template>
			<el-menu-item v-for="subItem in item.children" :index="subItem.path">
				<el-icon><Grid /></el-icon>
				{{ subItem.label }}
			</el-menu-item>
		</el-sub-menu>
	</el-menu>
</template>

<script>
import { Location ,Grid} from '@element-plus/icons-vue'
export default {
	props: ['collapse'],
	components: {
		Location,
		Grid
	},
	computed: {
		menuList() {
			return this.$store.getters['menu/menuList']
		},
	},
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
